import React from 'react';

// echart
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/map';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legendScroll';
import '@utils/china.js';

import './scss/echartarea.scss';


export default class EchartChinaMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.names = [
      '北京', '上海', '河北', '云南', '黑龙江','安徽',
      '新疆', '浙江', '湖北', '甘肃', '内蒙古','吉林',
      '贵州', '青海', '四川', '海南', '香港', '天津',
      '重庆', '河南', '辽宁', '湖南', '山东', '江苏',
      '江西', '广西', '山西', '陕西', '福建', '广东',
      '西藏', '宁夏', '台湾', '澳门'
    ];
  }

  componentDidMount() {
    this.sevenDayEchart();
  }

  randomData() {  
    return Math.round(Math.random()*500);  
  }
   
  // 最近七天数据
  sevenDayEchart() {
    let chinaMap = echarts.init(this.refs.echartChinaMap);
    let option = {
      title : {
        text: 'iphone销量',
        left: 'right',
        top: 0,
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      tooltip : { trigger: 'item' },
      legend: {
        orient: 'vertical',
        left: 'left',
        data:['iphone3'],
        textStyle: {
          color: '#fff'
        }
      },
      grid: { left: '1%', right: '1%', bottom: '1%'},
      visualMap: {
        show: true,
        left: 'left',
        top: 'center',
        splitList: [   
          {start: 0, end: 100},  
          {start: 100, end: 200},
          {start: 200, end: 300},  
          {start: 300, end: 400},
          {start: 400, end: 500}
        ],
        textStyle: {
          color: '#fff',
          fontSize: 10
        },
        color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53'] 
      },
      toolbox: {
          show: true,
          orient : 'vertical',
          left: 'right',
          top: 'center',
          //  右侧功能按钮 下载...
          // feature : {
          //   mark : {show: true},
          //   dataView : {show: true, readOnly: false},
          //   restore : {show: true},
          //   saveAsImage : {show: true}
          // }
      },
      series : [
        {
          name:    'iphone3',
          type: 'map',
          map: 'china',
          roam: false,
          aspectScale: 0.75,
          label: {  
            normal: { 
              show: true,
              textStyle: { color: '#fff' }
            },    //省份名称  
            emphasis: { show: false },  
          },
          data: this.names.map((item) => {
            console.log(item);
            return {
              name: item,
              value: this.randomData()
            };
          })
        }
      ]
    };
    chinaMap.setOption(option, true);
  }

  render() {
    return ( <div className="echart-type-area" ref="echartChinaMap"> </div> )
  }
}